<template>
  <div class="role-setting w100 h100">
    <div class="role-top">
      <el-button type="primary" icon="el-icon-plus" @click="handleCreate" class="function-btn">新增角色</el-button>
    </div>
    <div class="role-content">
      <el-table :data='listData' stripe class='reg-tab' :header-cell-style="getRowClass" v-loading="loading">
        <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in tableHead" :key="index">
        </el-table-column>
        <el-table-column label='操作'>
          <template slot-scope='scope'>
            <el-button type='text' size='small' @click="handleEdit(scope.row)" title="编辑">
              <img src="../../../../../static/image/common/edit.png" alt=""></el-button>
            <el-button type='text' size='small' @click="handleView(scope.row)" title="查看">
              <img src="../../../../../static/image/common/preview.png" alt=""></el-button>
            <el-button type='text' size='small' @click="handleDelete(scope.row)" title="删除">
              <img src="../../../../../static/image/common/delete.png" alt=""></el-button>
            <el-button type='text' size='small' @click="handleResource(scope.row)" title="资源">
              <img src="../../../../../static/image/common/config.png" alt=""></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="role-bottom">
      <span style="float:left;margin-right:10px; line-height: 25px;font-size:12px">每页: </span>
      <el-input placeholder="条数" v-model="pageSize"
                @blur="pagesizeChange" @keyup.enter.native="pagesizeChange" clearable> </el-input>
      <span style="float:left;margin-right:20px; line-height: 25px;font-size:12px">条</span>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--删除弹出框-->
    <delete-dialog :is-show="deleteDialogShow" @close="handleClose"></delete-dialog>
  </div>
</template>

<script>
import CreateRole from './createRole'
import ViewRole from './viewRole'
import DeleteDialog from '../../../../components/CommonDialog'
import Config from '../../../../config'
export default {
  name: 'role',
  components: {
    CreateRole,
    ViewRole,
    DeleteDialog
  },
  data () {
    return {
      loading: true,
      tableHead: [
        {prop: 'sort', label: '编号'},
        {prop: 'id', label: 'ID'},
        {prop: 'name', label: '角色名称'},
        {prop: 'code', label: '角色编码'},
        {prop: 'type', label: '角色类型'},
        {prop: 'remark', label: '角色描述'}
      ],
      listData: [],
      // 分页
      currentPage: 1,
      pageSize: 15,
      total: 0,
      // 弹出框
      deleteDialogShow: false,
      // 删除对象
      deleteObject: null,
      // 对话框
      dialogVisible: false,
      // 是否预览
      isView: false,
      title: '',
      ROLE_INSERT: '角色新增',
      ROLE_EDIT: '角色编辑',
      ROLE_VIEW: '角色预览',
      roleForm: {
        sort: -1,
        name: '',
        code: '',
        url: '',
        add: 0,
        des: ''
      }
    }
  },
  mounted () {
    this.getRole()
  },
  methods: {
    /**
     * 每页大小变化
     * */
    pagesizeChange () {
      if (+this.pageSize === 0) {
        this.pageSize = 15
      }
      if (Number.isInteger(+this.pageSize)) {
        this.input = +this.pageSize
        this.getRole()
      } else {
        this.$message({
          message: '请输入整数',
          type: 'warning'
        })
      }
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    /**
     * 从后台获取角色列表
     * */
    getRole () {
      const url = `${Config.AUTH_URL}/role/getByPageList`
      const param = {
        offset: this.currentPage - 1,
        pagesize: this.pageSize
      }
      this.$http.get(url, param)
        .then(data => {
          const list = data.pageList
          this.listData.splice(0)
          list.forEach(item => {
            this.listData.push(item)
          })
          this.total = data.totalCount
          this.loading = false
        })
    },
    /**
     * table头部改变颜色
     * */
    getRowClass ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#fafbfc'
      } else {
        return ''
      }
    },
    /**
     * 新增
     * */
    handleCreate (row) {
      this.title = this.ROLE_INSERT
      this.$router.push({
        path: `/system/role/create`
      })
    },
    /**
     * 编辑角色
     * */
    handleEdit (row) {
      this.title = this.ROLE_EDIT
      this.roleForm = row
      this.$router.push({
        path: `/system/role/edit/${row.id}`
      })
    },
    /**
     * 编辑角色
     * */
    handleView (row) {
      this.title = this.ROLE_VIEW
      this.roleForm = row
      this.$router.push({
        path: `/system/role/view/${row.id}`
      })
    },
    /**
     * 编辑角色
     * */
    handleDelete (row) {
      this.deleteObject = row
      this.deleteDialogShow = true
    },
    handleClose (id) {
      this.deleteDialogShow = false
      if (!id) {
        this.deleteObject = null
        return
      }
      const url = `${Config.AUTH_URL}/role/delete?id=${this.deleteObject.id}`
      this.$http.post(url)
        .then(data => {
          this.deleteObject = null
          this.$message.success('删除成功')
          this.getRole()
        })
    },
    handleResource (row) {
      this.$router.push({
        path: `/system/role/resource/${row.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../../static/scss/common";
  .role-setting {
    background-color: #fff;
    border: 1px solid #E4E4E4;
    position: relative;
    box-sizing: border-box;
    padding: 0 30px 26px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .role-top {
      display: inline-block;
      position: absolute;
      top: 24px;
      right: 29px;
    }
    .role-content {
      flex: 1;
      margin-top: 70px;
    }
    .role-bottom {
      margin-top: 38px;
      text-align: right;
    }
    .role-bottom /deep/ div.el-input {
      float:left;
      width:56px;
      margin: 0 6px;
      .el-input__inner {
        height: 26px;
        line-height: 26px;
        border: 1px solid #e4e4e4;
        padding-left: 5px;
      }
    }
  }
</style>
